<template>
  <div id="chart">
    <div class="sub-title">{{ $t('shangPinFenLeiXiaoShouPaiHangBang') }} TOP7</div>
    <dv-charts :option="option" />
  </div>
</template>

<script>
export default {
  name: 'RoseChart',
  data() {
    return {
      option: {
        color: ['#fff'],
        grid: {
          top: 40,
          right: 20,
          left: 200,
        },
        xAxis: {
          data: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            style: {
              fill: '#6C8097',
              fontSize: 12,
              rotate: 0,
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          name: this.$t('xiaoShoueWanYuan'),
          data: [
            ' Очиститель и увлажнитель воздуха',
            'Держатель',
            ' Инструменты для ремонта красок',
            'Массажное оборудование',
            'Батарея',
            ' Bluetooth и аксессуары',
            'уничтожитель бумаги',
          ],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            style: {
              fill: '#D0DEEE',
              fontSize: 12,
              rotate: 0,
            },

            width: 120,
          },
          splitLine: {
            show: false,
          },
          nameTextStyle: {
            fill: '#6C8097',
            fontSize: 12,
          },
        },
        series: [
          {
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: 'bar',
            animationCurve: 'easeOutBack',
            gradient: {
              color: ['#66E1DF', '#0B1113'],
            },
            barWidth: 8,
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
#chart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .dv-charts-container {
    height: calc(100% - 50px);
  }
}
</style>
